<template>
  <view>
    <HeaderNavTabarVue   :title="title" />
		<view class="uv-empty" v-if="accountingList.length === 0">
			<uv-empty :text="emptyText" icon="../../../static/images/empty.png"></uv-empty>
		</view>
    <view v-else class="accountingList" :style="'min-height: ' + boxHeight + 'rpx;'">
      <SiftCom
        @searchEmit="searchEmit"
				@siftList="siftList"
        @resetEmit="resetEmit"
        @popupSiftOpen="popupSiftOpen"
      >
<!--        <view class="picker-content">-->
<!--          <view class="measurement-info-list">-->
<!--            <text class="info-list-left">核算日期</text>-->
<!--            <view class="info-list-right" @tap="openPicker">-->
<!--              <view class="info-content">-->
<!--                {{ searcData.createTime }}-->
<!--              </view>-->
<!--              <i class="iconfont icon-youjiantou"></i>-->
<!--            </view>-->
<!--          </view>-->
<!--        </view>-->
        <view class="picker-content">
          <view class="measurement-info-list">
            <text class="info-list-left">测量单编号</text>
            <view class="info-list-right">
              <view class="info-content">
                <input
                  adjust-position
                  type="number"
                  class="uni-input placeholder-right"
									placeholder="请输入"
                  v-model="searcData.costingId"
                />
              </view>
            </view>
          </view>
        </view>
        <MyPicker
          @getVlaue="getVlaue"
          ref="customerPickerRef"
          popupTitle="请选择客户名称"
        >
          <view class="picker-content" @tap="toggle">
            <view class="measurement-info-list">
              <text class="info-list-left">客户名称</text>
              <view class="info-list-right">
                <view v-if="searcData.customerName" class="uni-input">{{ searcData.customerName }}</view>
								<view class="uni-inputs" v-else>请选择</view>
                <i class="iconfont icon-youjiantou"></i>
              </view>
            </view>
          </view>
        </MyPicker>


        <view class="picker-content">
          <view class="measurement-info-list">
            <text class="info-list-left">终端门店</text>
            <view class="info-list-right">
              <view class="info-content">
                <input
                  adjust-position
                  type="text"
                  class="uni-input placeholder-right"
									placeholder="请输入"
                  v-model="searcData.terminalName"
                />
              </view>
            </view>
          </view>
        </view>
      </SiftCom>
      <main class="box-main" >
        <CardList
          v-for="(item, index) in accountingList"
          :key="index"
          :manufacturerContact="item.measurement?.manufacturerContact"
          :customerId="item.costingId"
          :designType="item.type"
          :detailedAddress="item.customerName"
          mainFloorSvg="核算单"
          :terminalPhone="item.moneyAll"
          :surveyDate="item.createTime"
          :terminalName="item.measurement?.terminalName"
        >
        </CardList>
      </main>
      <view class="animbox-scroll-loading" v-show="statusLoding">
        <view></view>
        <view></view>
        <view></view>
        <view></view>
        <view></view>
      </view>
    </view>
    <uv-datetime-picker
      ref="datetimePicker"
      :modal-append-to-body="false"
      v-model="pickerValue"
      mode="date"
      :formatter="formatter"
      round="32 32 0 0"
      @confirm="confirm"
    >
    </uv-datetime-picker>
  </view>
</template>

<script setup>
import HeaderNavTabarVue from '@/components/HeaderNavTabar/HeaderNavTabar.vue'
import SiftCom from '@/components/siftCom/siftCom.vue'
import CardList from '@/components/cardList/cardList.vue'
import MyPicker from '@/components/MyPicker/MyPicker.vue'
import { getNowDate } from '@/utils/date.js'
import { getWorkApi, costingList } from '@/api/customer.js'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { ref, reactive } from 'vue'
import { getTitleBarHeight } from '@/utils/system.js'
import store from '@/store'

const title = '核算单列表'
const boxHeight =
  (uni.getSystemInfoSync().windowHeight - getTitleBarHeight()) * 2

// 搜索的数据
let searcData = ref({
  surveyDate: '',
  costingId: '',
  customerId: '',
  customerName: '',
  type: '',
  createTime: '',
	sortType:'',//1升序 2降序
})

const emptyText = ref('数据请求中...')

let accountingList = ref([])
// 筛选日期
// 刷选日期
let pickerValue = ref(Number(new Date()))
const datetimePicker = ref(null)

const openPicker = () => {
  datetimePicker.value.open()
}
const formatter = (type, value) => {
  if (type === 'year') {
    return `${value}年`
  }
  if (type === 'month') {
    return `${value}月`
  }
  if (type === 'day') {
    return `${value}日`
  }
  return value
}
const confirm = (e) => {
  pickerValue.value = getNowDate(e.value)
  searcData.value.surveyDate = getNowDate(e.value)
}
const customerPickerRef = ref(null) // 这个时候获取了子组件 Comp
// 客户信息
let customerList = ref([])
// 获取客户下拉菜单数据
const getWorkApiData = async (v = '') => {
  let params = {
    customerName: v,
  }
  let { code, data } = await getWorkApi(params)
  if (code == 200) {
    data.forEach((v) => {
      // customerList.value.push({
      //   label:  v.primaryClassification+'/'+ v.customerName,
      //   value: v.customerId,
      // })
			// 过滤掉 null
			customerList.value.push({
			  label:  [v.primaryClassification,v.customerName].filter(item => item != null).join('/'),
			  value: v.customerId,
			})
    })
    store.commit('setCustomerList', customerList.value)
  }
}

// 选择的客户数据
const getVlaue = (v) => {
  console.log(v)
  searcData.value.customerId = v.value
  searcData.value.customerName = v.label
  customerPickerRef.value.closePop()
}
// 打开模态床
const toggle = () => {
  customerPickerRef.value.toggle('bottom') // 调用子组件的 show 方法
}

// 打开筛选狂
const popupSiftOpen = () => {
  for (let key in searcData.value) {
    if (searcData.value[key]) {
      searcData.value[key] = ''
    }
  }
}

const resetEmit = (v) => {
  costingListFn()
  v.close()
}

const siftList = (v) => {
	// console.log(v,'vvv') // 0 降序 1 升序
	pageNum.value = 1
	searcData.value.sortType = Number(v) + 1
	costingListFn(searcData.value, false)
}

const searchEmit = (v) => {
  pageNum.value = 1
  costingListFn(searcData.value, false)
  v.close()
}

let pageNum = ref(1)
let pageSize = ref(10)
let totals = ref(888)
let statusLoding = ref(false)
const costingListFn = async (data = {}, flag = true) => {
  let page = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  }
  let params = Object.assign(data, page)
  let res = await costingList(params)
  let { code, rows, total } = res
  try {
    if (code == 200) {
      if (statusLoding.value) {
        statusLoding.value = false //加载中状态
      }
      if (flag) {
        accountingList.value = [...accountingList.value, ...rows]
      } else {
        accountingList.value = rows
      }
      totals.value = total
			
			if(accountingList.value.length === 0){
				emptyText.value = '列表为空'
			}
    }
  } catch {}
}
onReachBottom(() => {
  statusLoding.value = true //加载完状态
  let allTotal = pageNum.value * pageSize.value
  if (allTotal < totals.value) {
    pageNum.value++
    costingListFn()
  } else {
    uni.showToast({
      title: '数据加载完毕',
    })
    statusLoding.value = false
  }
})
onLoad(() => {
  getWorkApiData()
  costingListFn()
})
</script>

<style lang="scss" scoped>
@import '../../../static/style/index.scss';

:deep(.uni-input-input) {
  text-align: right;
}

.accountingList {
  padding:0  32rpx 24rpx 32rpx;
  box-sizing: border-box;
  background-color: $uni-bai;

  .box-main {
    padding: 107rpx 0;
    box-sizing: border-box;
  }
}

.measurement-info-list {
  @include flex($align: center, $justify: space-between);
  padding: $spacing-row-base;

  .info-list-left {
    // @include font-color-auxiliary;
    color: $uni-fc-fu-lin;
    font-size: $font-size-base;
  }

  .info-list-right {
    @include flex($align: center);

    .info-content {
      @include textStyleBase;
      font-size: 34rpx;
    }

    .iconfont {
      margin-left: 16rpx;
      // @include font-color-auxiliary;
      color: $uni-fc-fu-lin;
    }
  }

  .unit {
    // @include font-color-auxiliary;
    color: $uni-fc-fu-lin;
  }
}
</style>
